<template>
  <div class="theitem" @click="goToListItem(item.externalId || item.externalProductId)">
    <img
      style="object-fit: cover"
      :src="
        item?.image?.replace('https://static.mercdn.net', 'https://image1.leyifan.cn/mercari-cdn')
      "
      alt=""
    />
    <div class="text">
      <p style="color: #333; font-size: 13rem">{{ item?.storeName }}</p>
      <div class="usetype" :class="getTypeClass(item?.conditionId)">
        {{ getConditionText(item?.conditionId) }}
      </div>
      <div>
        <span style="color: #ff3d58; font-size: 16rem; font-weight: 600">{{ item?.price }}</span>
        <span style="color: #ff3d58; font-size: 11rem; line-height: 12rem">&nbsp;日元</span>
      </div>
      <p style="font-size: 1em; color: #333">约{{ item?.convertPrice }}人民币</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineComponent, PropType } from 'vue'
import { useRouter } from 'vue-router'
defineComponent({
  props: {
    item: {
      type: Object as PropType<{ [key: string]: any }>,
      required: true,
    },
  },
})
const router = useRouter()
const { item } = defineProps<{
  item: {
    externalId: string
    image: string
    storeName: string
    conditionId: number
    price: string
    convertPrice: string
  }
}>()
const getTypeClass = (id: number): string => {
  switch (id) {
    case 1:
      return 'style1'
    case 2:
      return 'style2'
    case 3:
      return 'style3'
    default:
      return 'default-style'
  }
}
const getConditionText = (id: number): string => {
  switch (id) {
    case 1:
      return '新.未使用'
    case 2:
      return '接近未使用'
    case 3:
      return '无明显划痕或污垢'
    default:
      return '未知'
  }
}
const goToListItem = (id) => {
  router.push({ path: '/listitem', query: { id } })
}
</script>

<style scoped lang="less">
.theitem {
  width: 167rem;
  //   height: 230rem;
  //   height: 230rem;
  background-color: #f5f5f5;
  margin-bottom: 14rem;
  border-radius: 8rem;
  img {
    width: 165rem;
    height: 164rem;
    display: block;
    border-top-left-radius: 8rem;
    border-top-right-radius: 8rem;
  }
  .text {
    width: 100%;
    padding: 10rem 10rem 14rem 10rem;
    p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: nowrap;
    }
    .usetype {
      display: inline;
      height: 16rem;
      font-size: 10rem;
      border-radius: 4rem;
      line-height: 16rem;
    }
    .usetype.style1 {
      /* 样式1 */
      background-color: rgba(37, 203, 149, 0.16);
      color: rgb(37, 203, 149);
    }

    .usetype.style2 {
      /* 样式2 */
      background-color: rgba(21, 159, 233, 0.16);
      color: rgb(21, 159, 233);
    }

    .usetype.style3 {
      /* 样式3 */
      background-color: rgba(255, 151, 17, 0.16);
      color: rgb(255, 151, 17);
    }

    .usetype.default-style {
      /* 默认样式 */
      background-color: rgba(128, 128, 128, 0.16);
      color: rgb(128, 128, 128);
    }
  }
}
</style>